<!-- 
本案例实现【组件动态切换】

即当事件触发时，页面的各种组件之间可以来回切换，如组件 A 切换为组件 B

这里演示两个组件，两个组件之间，当按钮按下时，进行相互切换
-->
<template>
  <component :is="currentComponent"></component>
  <button @click="toggleComponent">切换组件</button>
</template>

<script>
import ComA from "./components/ComA.vue";
import ComB from "./components/ComB.vue";

export default {
  components: {
    ComA,
    ComB
  },
  data() {
    return {
      // 组件建议使用字符串包裹
      currentComponent: "ComA",
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === "ComA" ? "ComB" : "ComA";
    }
  }
}
</script>

<style></style>